<query-editor-row query-ctrl="ctrl" class="generic-datasource-query-row" has-text-edit-mode="true">
  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Namespace</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input min-width-12" ng-model="ctrl.target.namespace" ng-options="f as f for f in ctrl.namespaces"
          ng-change="ctrl.onNamespaceChange()"></select>
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Region</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown model="ctrl.target[ctrl.target.service].region" allow-custom="true" lookup-text="true" get-options="ctrl.getRegions($query)"
          on-change="ctrl.onRegionChange()" css-class="min-width-10">
        </gf-form-dropdown>
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">MetricName</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown model="ctrl.target[ctrl.target.service].metricName" allow-custom="true" lookup-text="true" get-options="ctrl.getMetrics($query)"
          on-change="ctrl.onMetricChange()" css-class="min-width-10">
        </gf-form-dropdown>
      </div>
    </div>
    <div class="gf-form gf-form-label--grow" ng-if="!!ctrl.getMetricNameDesc()">
      <label class="gf-form-label gf-form-label--grow">({{ctrl.getMetricNameDesc()}})</label>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Period</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input min-width-10" ng-change="ctrl.refresh()" ng-model="ctrl.target[ctrl.target.service].period"
          ng-options="f for f in ctrl.periodList"></select>
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Instance</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input min-width-8" ng-change="ctrl.onInstanceAliasChange()" ng-model="ctrl.target[ctrl.target.service].instanceAlias"
          ng-options="f.value as f.text for f in ctrl.instanceAliasList"></select>
      </div>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown model="ctrl.target[ctrl.target.service].instance" allow-custom="true" lookup-text="true" get-options="ctrl.getInstances($query)"
          on-change="ctrl.refresh()" css-class="min-width-10">
        </gf-form-dropdown>
      </div>
    </div>
    <div class="gf-form" ng-if="!ctrl.isVariable('instance')">
      <label class="gf-form-label width-7">Show Details</label>
      <gf-form-switch class="gf-form tc-switch" label-class="width-7" checked="ctrl.target.showInstanceDetails" switch-class="max-width-5"></gf-form-switch>
    </div>
    <div class="gf-form gf-form-label--grow">
      <label class="gf-form-label gf-form-label--grow">(按照具体的查询条件搜索实例，默认拉取前 20 条实例)</label>
    </div>
  </div>

  <!-- 不同产品的实例查询条件模块如下 -->
  <!-- CVM -->
  <cvm-query
    ng-if="ctrl.target.service==='cvm'"
    target="ctrl.target.cvm"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.cvm.region)"
  ></cvm-query>

  <!-- CDB -->
  <cdb-query
    ng-if="ctrl.target.service==='cdb'"
    target="ctrl.target.cdb"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.cdb.region)"
  ></cdb-query>

   <!-- PCX -->
  <pcx-query
    ng-if="ctrl.target.service==='pcx'"
    target="ctrl.target.pcx"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.pcx.region)"
 ></pcx-query>

  <!-- Nat Gateway-->
  <nat-gateway-query
    ng-if="ctrl.target.service==='natGateway'"
    target="ctrl.target.natGateway"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.natGateway.region)"
  ></nat-gateway-query>

  <!-- MongoDB-->
  <mongodb-query
    ng-if="ctrl.target.service==='mongoDB'"
    target="ctrl.target.mongoDB"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.mongoDB.region)"
  ></mongodb-query>

  <!-- LB_PUBLIC-->
  <lb-public-query
    ng-if="ctrl.target.service==='lbPublic'"
    target="ctrl.target.lbPublic"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.lbPublic.region)"
  ></lb-public-query>
  
  <!-- PostgreSQL-->
  <postgres-query
    ng-if="ctrl.target.service==='postgres'"
    target="ctrl.target.postgres"
    show-detail="ctrl.checkShowDetail('instance')"
    datasource="ctrl.datasource"
    on-change="ctrl.onInstanceQueryChange()"
    region="ctrl.getVariable(ctrl.target.postgres.region)"
  ></postgres-query>

  <!-- Global error message -->
  <div class="gf-form" ng-show="ctrl.lastQueryError">
    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
  </div>
</query-editor-row>